<template>
  <div>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleDelete">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="search">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="广告位">
              <el-select style="width: 100%;" v-model="searchObject.adPosition" filterable clearable
                         placeholder="请选择">
                <el-option v-for="item in adPositionOptions" :key="item.id" :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="广告名称">
              <el-input v-model="searchObject.title"    placeholder="广告名称" name="title">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding: 0 10px">
            <el-row type="flex" justify="end">
              <el-button  type="primary" @click="search">搜索</el-button>
              <el-button  plain @click="clearSearch">清除条件</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-content">
      <div class="tool-add">
        <el-button type="primary"  @click="addView">新增</el-button>
      </div>
      <el-row :gutter="20" v-loading="loading" style="margin-left: -10px; margin-right: -10px;">
        <el-col :span="6" v-for="item in pageData.data" :key="item.id">
          <el-card :body-style="{ padding: '0px' }">
            <div class="card">
              <el-image style="width: 100%; height: 150px" :src="item.path">
              </el-image>
              <div style="padding:3px 14px;">
                标题:<span v-text="item.title"></span>
              </div>
              <div style="padding:3px 14px;">
                广告位:<span v-text="item.adPositionName"></span>
              </div>
              <div class="state">
                <el-button type="primary" size="small" @click="editView(item)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteData(item)">删除</el-button>
              </div>
            </div>

          </el-card>
        </el-col>
      </el-row>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[8, 16, 40, 80]"
                       :page-size="pageData.size" :pager-count="5"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                       :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineStore} from 'pinia'
import {usePage} from "@/utils/usePage";
import {useDelete} from "@/utils/useDelete";
import {useView} from "@/utils/useView";
import {useData} from "@/utils/useData";

const searchStore = defineStore('lotteryStore', {

  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 8,
        sortField: "id",
        sortMethod: "desc",
        ticketRule: null,
        adPosition:null,
        name: null
      }
    }
  }
})

const {searchObject} = searchStore();

const clearSearch = () => {
  searchObject.ticketRule = null;
  searchObject.name = null;
  searchObject.adPosition=null;
}
const {pageData, sizeChange, pageChange, search, changeTableSort, loading} = usePage("/ad/search", searchObject);
const {dialogVisible, deleteData, handleDelete} = useDelete("/ad/delete", search);
const {showView, addView, editView} = useView();

const {listData: adPositionOptions} = useData("/adPosition/list")


</script>

<style scoped>
.el-card {
  margin: 10px 0px;
}

.card {
  position: relative;
}

.card:hover .state {
  display: flex;
  padding-bottom: 20px;
}

.card .state {
  display: none;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0px;
  top: 0px;
  justify-content: center;
  align-items: flex-end;

}
</style>
